<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>Calendar Test (steel)</title>

	<link rel="stylesheet" href="../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../../dojo/dijit/tests/css/dijitTests.css">
	<style type="text/css">
		#calendar5 .dijitCalendarDateTemplate { height: 50px; width: 50px; border: 1px solid #ccc; vertical-align: top }
		#calendar5 .dijitCalendarDateLabel, #calendar5 .dijitCalendarDateTemplate { text-align: inherit }
		#calendar5 .dijitCalendarDayLabel { font-weight: bold }
		#calendar5 .dijitCalendarSelectedYear { font-size: 1.5em }
		#calendar5 .dijitCalendarMonthLabel { font-family: serif; letter-spacing: 0.2em; font-size: 2em }
		.blue { color: blue }
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../themes/steel/SteelBase.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../../../../dojo/dijit/tests/_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Calendar");
		dojo.require("dojo.date.locale");
		dojo.require("dojo.parser"); // scan page for widgets
		dojo.addOnLoad(function(){
			//Need to declare BigCalendar here in an addOnLoad block so that it works
			//with xdomain loading, where the dojo.require for dijit.Calendar
			//may load asynchronously. This also means we cannot have HTML
			//markup in the body tag for BigCalendar, but instead inject it in this
			//onload handler after BigCalendar is defined.
			dojo.declare("BigCalendar", dijit.Calendar, {
				templateString: dojo.cache("dijit.tests", "_altCalendar.html"),
				isDisabledDate: dojo.date.locale.isWeekend,
				getClassForDate: function(date){
					if(!(date.getDate() % 10)){ return "blue"; } // apply special style to all days divisible by 10
				}
			});

			var bigCalendar = dojo.byId("calendar5");
			bigCalendar.setAttribute("dojoType", "BigCalendar");
			dojo.parser.parse(bigCalendar.parentNode);
		});

		function myHandler(id,newValue){
			console.debug("onChange for id = " + id + ", value: " + newValue);
		}
	</script>

</head>
<body class="steel">
		<h1 class="testTitle">Dijit Calendar Test</h1>
		<input value="input before" id="before">
		<br>
		<br>
		<input id="calendar1" dojoType="dijit.Calendar" onChange="myHandler(this.id,arguments[0])">
		<br>
		<input value="input after" id="after">
		<p>
			<a href="#"
			   onClick="dijit.registry.forEach(function(c){
					c.isDisabledDate = dojo.date.locale.isWeekend;
					c._populateGrid();
				});">disable weekends</a>
		</p>

		<p>Customized template with "today" button</p>
		<div>
			<!-- Parent div used so we have a handle to use for dojo.parser.parse after BigCalendar gets defined. -->

			<!-- The input below will be replaced by BigCalendar which is defined in a dojo.addOnLoad block. -->
			<input id="calendar5" dayWidth="abbr" value="2008-03-14">
		</div>

</body>
</html>